<template>
  <view class="trends" @click="toDetail(trends)">
    <view class="content">
      <!-- 内容 -->
      <view class="comment u-line-1 title" v-if='trends.title'>{{trends.title}}</view>
      <!-- 内容 -->
      <view class="comment u-line-2" v-if="trends.content">{{ trends.content }}</view>
      <!-- 图片 -->
      <view class="pics" v-if="trends.link_url.length > 0">
        <block v-if="trends.link_url.length == 1">
          <view class="pic_item1" v-for="(item, index) in trends.link_url" :key="index">
            <image :src="item" mode="widthFix"></image>
          </view>
        </block>
        <block v-else>
          <view
            class="pic_item"
            v-for="(item, index) in trends.link_url"
            :key="index"
            v-show="trends.link_url && index < 3"
          >
            <image :src="item" mode="aspectFill"></image>
          </view>
        </block>
      </view>
    </view>
    <view class="trends_foot">
      <view class="userInfo" @click.stop="toMypage(trends)">
        <view>
          <u--image :src="trends?.user_avatar" width="40rpx" height="40rpx" radius="50%">
            <template #error class="flex-center-center">
              <view class="ic-error">
                <u-icon name="photo" size="20"></u-icon>
              </view>
            </template>
          </u--image>
        </view>
        <view class="nickname">
          <view class="nickname_n">{{ trends.user_nickname }}</view>
          <view v-show="trends.identity_status && !trends?.app_user_tag" class="nickname_t">{{
            getUserTatus(trends.identity_status)
          }}</view>
          <view class="nickname_s" v-if="trends?.app_user_tag == 'official'">官方账号</view>
          <view class="nickname_d" v-if="trends?.app_user_tag == 'doctor'">专家医生</view>
        </view>
      </view>
      <view class="actions">
        <view class="actions_item" @click.stop="toppicPing()">
          <u-icon
            name="https://ossresource.miyingbl.com/uploads/20240304/94610cc057d42167004f2984ba4777c2.png"
            size="19"
          ></u-icon>
          <text>{{ trends.comment_number }}</text>
        </view>
        <view class="actions_item" @click.stop="toppicZan()">
          <u-icon name="heart-fill" size="20" v-if="trends.is_zan == 1" color="#FFB300"></u-icon>
          <u-icon name="heart" size="20" v-else color="#333333"></u-icon>
          <text>{{ trends.zan_number }}</text>
        </view>
        <view class="actions_item" @click.stop="deleteArticle(trends, i)">
          <u-icon name="close" size="16" color="#333"></u-icon>
        </view>
      </view>
    </view>
  </view>

  <h-login top="50" ref="login"></h-login>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { trendsCategory, getTrendsList, trendsZan, trendsCollect } from '@/api/trends'
import { showToast, navigateTo } from '@/utils'
import { useMemberStore, useSystemStore } from '@/stores'
import { negativeFeedbackApi } from '@/api/home'
const login = ref(null)
const store = useMemberStore()

const emit = defineEmits(['deleteArticle', 'itemTap', 'updateList', 'toLogin', 'share'])
const props = defineProps({
  trends: {},
  type: 1,
})

const toDetail = (item) => {
  uni.navigateTo({
    url: '/socials/detail/index?type=' + props.type + '&id=' + item.id,
  })
}
const toMypage = (item) => {
  if (item.app_user_tag == 'official' || item.app_user_tag == 'doctor') {
    navigateTo(
      `/pages-users/my-page/official-doctor-home?is_self=0&uid=${
        item?.user_id || item?.uid
      }&type=dt&tag=${item?.app_user_tag}`,
    )
  } else {
    navigateTo(
      `/pages-users/my-page/index?is_self=0&uid=${item?.user_id || item?.uid}&type=dt&tag=${
        item?.app_user_tag
      }`,
    )
  }
}
const toppicPing = () => {
  const token = store?.token
  if (!token) {
    login.value.open()
  } else {
    navigateTo('/socials/detail/index?id=' + props.trends.id + '&isCom=true')
  }
  //  topicDetail.value = row
  //  commentShow.value = true
}
const toppicCollect = async () => {
  console.log(props.trends)
  const token = store?.token
  if (!token) {
    login.value.open()
    return false
  }
  const res = await trendsCollect({
    id: props.trends.id,
    type: props.type,
  })
  if (props.trends.is_collect == 0) {
    props.trends.is_collect = 1
    props.trends.collect_number++
  } else {
    props.trends.is_collect = 0
    props.trends.collect_number--
  }
  uni.showToast({
    title: res.msg,
    icon: 'none',
    duration: 2000,
  })
}
const toppicZan = async () => {
  const token = store?.token
  if (!token) {
    login.value.open()
    return false
  }
  const res = await trendsZan({
    id: props.trends.id, //动态id
    type: props.type,
    zan_type: 1,
  })
  if (props.trends.is_zan == 1) {
    props.trends.is_zan = 0
    props.trends.zan_number--
  } else {
    props.trends.is_zan = 1
    props.trends.zan_number++
  }
  uni.showToast({
    title: res.msg,
    icon: 'none',
    duration: 2000,
  })
}

function getUserTatus(identity_status) {
  var arr = [
    {
      status_name: '未选择',
      status: 0,
    },
    {
      status_name: '记经期',
      status: 1,
    },
    {
      status_name: '备孕中',
      status: 2,
    },
    {
      status_name: '怀孕中',
      status: 3,
    },
    {
      status_name: '宝宝已出生',
      status: 4,
    },
    {
      status_name: '未婚',
      status: 5,
    },
    {
      status_name: '准爸',
      status: 6,
    },
    {
      status_name: '爸爸',
      status: 7,
    },
    {
      status_name: '生产育儿',
      status: 8,
    },
    {
      status_name: '慢病',
      status: 9,
    },
    {
      status_name: '其他',
      status: 10,
    },
  ]
  var status_name = ''
  for (var i in arr) {
    if (identity_status == arr[i].status) {
      status_name = arr[i].status_name
      console.log(status_name)
    }
  }
  return status_name
}
// 删除该文章
async function deleteArticle(row, index) {
  const res = await negativeFeedbackApi({
    id: row.id,
    type: 1,
  })
  showToast(res.msg)
  if (res.data.Result) {
    emit('deleteArticle', row, index)
  }
}
</script>

<style lang="scss">
.trends {
  padding: 24rpx;
  border-radius: 12rpx;
  background: #fff;
  .content {

    .comment {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #666666;
      line-height: 1.5;
    }
    .title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      color: #000000;
    }
    .pics {
      margin-top: 10rpx;
      overflow: hidden;
      .pic_item {
        width: 33.333%;
        float: left;
        height: 216rpx;
        box-sizing: border-box;
        padding: 1%;
        &:nth-child(3n + 1) {
          margin-left: 0;
        }
        image {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
      }
      .pic_item1 {
        width: 300rpx;
        max-height: 500rpx;
        overflow: hidden;
        image {
          width: 300rpx;
          border-radius: 10rpx;
        }
      }
    }
  }
  .trends_foot {
    padding-top: 20rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .userInfo {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .nickname {
        max-width: 350rpx;
        display: flex;
        justify-content: flex-start !important;
        .nickname_n {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #929292;
          line-height: 46rpx;
          margin-left: 18rpx;
          flex: 1;
          overflow: hidden;
          padding-right: 10rpx;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .nickname_t {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #929292;
          line-height: 46rpx;
        }
        .nickname_s {
          display: inline-block;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 18rpx;
          color: #ffffff;
          width: 96rpx;
          height: 25rpx;
          line-height: 25rpx;
          background: url('https://ossresource.miyingbl.com/uploads/20240513/7267c6875d62177ca93da9bb21967fa7.png')
            no-repeat;
          background-size: 100% 100%;
          padding-left: 14rpx;
          margin: 10rpx 0;
          text-align: center;
        }
        .nickname_d {
          display: inline-block;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 18rpx;
          color: #ffffff;
          width: 96rpx;
          height: 25rpx;
          line-height: 25rpx;
          background: url('https://ossresource.miyingbl.com/uploads/20240513/4dbdd894ca27843d8ee9524b86db6224.png')
            no-repeat;
          background-size: 100% 100%;
          padding-left: 14rpx;
          margin: 10rpx 0;
          text-align: center;
        }
      }
    }
    .actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .actions_item {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #333333;
        line-height: 46rpx;
        margin-left: 20rpx;
        letter-spacing: 2px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        text {
          margin: 0 10rpx;
        }
      }
    }
  }
}
</style>
